// 表单验证


// 获取元素
let useripnt = document.querySelector('#useripnt')
// console.log(useripnt);
let dateIocn = document.querySelector('#dateIocn')
// console.log(dateIocn);
let pwdiput = document.querySelector('#pwdiput')
console.log(pwdiput);
let egeIocn = document.querySelector('#egeIocn')
console.log(egeIocn);
// let password = document.querySelector('password')
// console.log(password);
// 需求4.输入用户名时(),验证输入内容的长度是否大于0,并且隐藏自己
// 事件源 useripnt
// 事件类型 input keyup
// 验证账号

useripnt.addEventListener('input', function () {
    if (useripnt.value.length > 0) {
        dateIocn.style.display = 'block'
    } else {
        dateIocn.style.display = 'none'
    };
})

// 点击dateIocn,清除useripnt,隐藏自己
dateIocn.addEventListener('click', function () {
    // 清空useripnt
    useripnt.value = ''
    // 隐藏自己
    dateIocn.style.display = 'none'

})

// 需求6.输入密码时(),验证输入内容的长度是否大于0,并且隐藏自己
// 事件源 password
// 事件类型 input keyup
// 验证账号

pwdiput.addEventListener('input', function () {
    if (pwdiput.value.length > 0) {
        egeIocn.style.display = 'block'
    } else {
        egeIocn.style.display = 'none'
    };
})
// 需求7: 切换眼睛
//  点击egeIocn,判断
// 偶数次点击: egeIocn的src:./ img / close.png password的type: password
// 奇数次点击:egeIocn的src:./ img / open.png  password的type: text
//定义一个数保存
let count = 0
egeIocn.addEventListener('click', function () {
    ++count//自增
    if (count % 2 != 0) {
        // 奇数次点击
        egeIocn.src = '../imgs/open.png'
        pwdiput.type = 'text'
    } else {
        // 偶数次点击
        egeIocn.src = '../imgs/close.png'
        pwdiput.type = 'password'
    }
})


let userTips = document.querySelector('#userTips')
console.log(userTips);
let pswdTips = document.querySelector('#pswdTips')
console.log(pswdTips);

// 定义正则表达式
// 创建账号验证规则-正则表达式
let userReg = /^1[345678][0-9]{9}$/
// 创建账号验证规则-正则表达式
let pwdReg = /^\d{6}$/ //六位数字

// 需求8, 账号失去焦点, 验证账号是否合法
useripnt.addEventListener('blur', function () {
    let bool = (userReg.test(useripnt.value));
    if (bool) {
        userTips.textContent = ''
    } else {
        userTips.textContent = '账号不正确请重新输入哦!'

    }
})
// 需求8, 密码失去焦点, 验证密码是否合法
pwdiput.addEventListener('blur', function () {
    let bool = (pwdReg.test(pwdiput.value));
    if (bool) {
        pswdTips.textContent = ''
    } else {
        pswdTips.textContent = '密码必须是六位数字哦!'

    }
})

let ModBtn = document.querySelector('#ModBtn')
console.log(ModBtn);



// 需求10,点击登录按钮(ModBtn),验证输入信息的合法性
ModBtn.addEventListener('click', function () {
    if (!userReg.test(useripnt.value)) {
        userTips.textContent = '账号不正确请重新输入哦!'
    } else if (!pwdReg.test(pwdiput.value)) {
        pswdTips.textContent = '密码必须是六位数字哦!'
    } else {
        location.href = './home.html'
    }
})




// 选项卡

// 获取元素
let dlspan = document.querySelector('.dlspan')
// console.log(dlspan);
let smsapn = document.querySelector('.smsapn')
// console.log(smsapn);
let user = document.querySelector('.user')
// console.log(user);
let scancode = document.querySelector('.scancode')
let closebtn = document.querySelector('.closebtn')
console.log(closebtn);
// 切换账号框
dlspan.addEventListener('click', function () {
    scancode.style.display = 'none'
    user.style.display = 'block'
})
//切换扫码框
smsapn.addEventListener('click', function () {
    user.style.display = 'none'
    scancode.style.display = 'block'
})